<template>
  <div>
     <!-- 搜索框部分 -->
    <searchBar type="3" title="网易严选" />
    <div class="bigContainer">
   
    <!-- line 彩色小条条 -->
    <div class="lineC">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
      <img src="../../assets/images/line.webp" alt="">
    </div>
    <!-- 个人信息 -->
    <div class="personInfo">
      <div class="left">
         <div class="top">
        <div class="name">{{userAddressList.consignee}}</div>
        <div class="phone">{{phoneStart}}****{{phoneEnd}}</div>
      </div>
      <div class="bottom">
        <div class="default">默认</div>
        <div class="address">{{userAddressList.fullAddress}}</div>
      </div>
      </div>
      <div class="right">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- 优惠券 -->
    <div class="discount">
      <div class="left">暂无可用优惠券</div>
      <div class="right">
        <span class="num">2张</span>
        <van-icon name="arrow" />
      </div>
    </div>
   <!-- 礼品卡余额 -->
   <div class="discount" style="color:#ccc">
      <div class="left">
        <van-field name="checkbox" >
          <template #input >
            <van-checkbox  shape="square" disabled />
          </template>
        </van-field>
        <div class="content">礼品卡余额： ￥0.00</div>
      </div>
      <div class="right">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 余额 -->
     <div class="discount" style="color:#ccc">
      <div class="left">
        <van-field name="checkbox" >
          <template #input>
            <van-checkbox  shape="square" disabled/>
          </template>
        </van-field>
        <div class="content">余额： ￥0.00</div>
      </div>
      <div class="right">
        <van-icon name="info-o" />
      </div>
    </div>
    <!-- line -->
    <div class="line"></div>
     <!-- 商品合计 -->
    <div class="discount">
      <div class="left">商品合计</div>
      <div class="right">
        <span class="num">￥{{totalPrice}}.00</span>
      </div>
    </div>
    <!-- 邮费 -->
     <div class="discount">
      <div class="left">邮费</div>
      <div class="right">
        <span class="num">￥0.00</span>
      </div>
    </div>
    <!-- 优惠活动 -->
     <div class="discount">
      <div class="left">优惠活动 
        <van-icon style="margin-left:10px;color:#ccc;" name="info-o" />
      </div>

      <div class="right">
        <span class="num">￥-{{totalDiscount*100}}.00</span>
      </div>
    </div>
     <!-- 优惠券 -->
     <div class="discount">
      <div class="left">优惠券</div>
      <div class="right">
        <span class="num">-￥0.00</span>
      </div>
    </div>
      <!-- 余额 -->
     <div class="discount" style="color:#ccc">
      <div class="left">
        <van-field name="checkbox" >
          <template #input>
            <van-checkbox shape="square" disabled />
          </template>
        </van-field>
        <div class="content">我要开发票</div>
      </div>
      <div class="right">
        <van-icon name="arrow" />
      </div>
    </div>
     <!-- line -->
    <div class="line"></div>




    <!-- 商品列表 -->

    <div class="skyInfoContainer" v-for="(item,index) in detailArrayList" :key="item.skuId">
     <div class="skuInfo">
      <!-- 包裹 -->
      <div class="discount" style="margin-left:0px;">
        <div class="left">包裹{{index+1}} 
          <span style="margin-left:10px;font-size:12px;color:#999;">受疫情影响发货可能延迟，待恢复之后火速发出</span>
        </div>
      </div>
      <!-- 内容 -->
      <div class="content">
        <div class="left">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="center">
          <p><i>每日抄底</i>{{item.skuName}}</p>
          <div class="spu"></div>
          <div class="price"><span class="now">￥{{item.orderPrice}}</span> <span class="old">￥{{item.orderPrice -100}}</span> </div>
        </div>
        <div class="right">X{{item.skuNum}}</div>
      </div>
    </div>






    <!-- 灰色边框 -->
     <div class="line"></div>
      </div>
      

   <!-- 我同意 -->
   <div class="agree">
    <van-field name="checkbox" >
      <template #input>
        <van-checkbox v-model="checkbox" shape="square" />
      </template>
    </van-field>
    <span class="already"><i>我已同意</i> 《网易严选服务协议》</span>
   </div>
   <div class="empty" ></div>
    <div class="submit">
      <div class="left">应付：￥{{totalPrice-totalDiscount}}</div>
      <div class="right" @click="toPay">去付款</div>
    </div>
   
    </div>
  </div>
  
</template>

<script>
  import searchBar from '@/components/searchBar'
  import { Toast } from 'vant';
  export default {
    name:'Order',
    data(){
      return{
        checkbox:'',
        userAddressList:{},  //用户信息地址
        detailArrayList:[],  //商品订单列表信息
        tradeNo:'',          //交易编号
        orderId:'',          //订单的编号 id  将来给 支付的时候 心跳请求用的
      }
    },
    components:{
      searchBar
    },
    computed:{
      // 手机号位置 开头三个数字
      phoneStart(){
        return this.userAddressList.phoneNum && this.userAddressList.phoneNum.slice(0,3)
      },
      // 手机号位置 结尾四个数字
      phoneEnd(){
        return this.userAddressList.phoneNum && this.userAddressList.phoneNum.slice(7,11)
      },
      // 商品合计总价
      totalPrice(){
       let price =  this.detailArrayList.reduce((pre,item)=>{
             pre += item.orderPrice * item.skuNum
             return pre
          },0)


        return  price
      },
      // 优惠价格 这里是每个商品优惠100元
      totalDiscount(){
        let num = this.detailArrayList.reduce((pre,item)=>{
          pre +=item.skuNum
          return pre
        },0) 
        return num
      }


    },
    methods:{
      // 获取订单数据信息
     async getTradeInfo(){
        const result = await this.$ajax.trade.reqGetTradeInfo()
        console.log(result)
        // 保存用户地址信息
        this.userAddressList = result.data.userAddressList[0]
        // 保存商品订单列表信息
        this.detailArrayList = result.data.detailArrayList
        this.tradeNo = result.data.tradeNo
      },
     async toPay(){
        if(this.checkbox){
        const {tradeNo,userAddressList,detailArrayList} = this
        const data = {
          consignee:userAddressList.consignee,
          consigneeTel:userAddressList.phoneNum,
          deliveryAddress:userAddressList.fullAddress,
          paymentWay:'ONLINE',
          orderComment:'',
          orderDetailList:detailArrayList

        }
        // 发请求获取订单编号
      const result = await  this.$ajax.trade.reqGetOrderId(tradeNo,data)
      if(result.code == 200){
        // 获取订单编号成功
        const orderId = result.data
        this.orderId = result.data
      
        // 获取订单编号成功  跳转到 支付页面
        this.$router.push({
          name:'pay',
          query:{
            orderId
          }
        })
      }
      



        }else{
          Toast.fail('请先勾选用户服务协议');
        }
      }

    },
    mounted(){
      this.getTradeInfo()
    }
  }
</script>

<style lang="less" scoped>
.bigContainer{
  position: relative;
  // 复选框清除padding
  /deep/.van-cell{
    padding: 0;
    border-radius: 5px;
    width: 20px;
    margin-right: 8px;
  }

  box-sizing: border-box;
  font-size: 14px;
    // 横线
  .line{
    width: 100%;
    height: 10px;
    box-sizing: border-box;
    background-color: #eee;

  }
  // 彩色横线
  .lineC{
    height: 5px;
    width: 100%;
    display: flex;
  }
  // 个人信息
  .personInfo{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    .left{
      display: flex;
      flex-direction: column;
      .top{
        display: flex;
        margin-bottom: 7px;
        .name{
          margin-right: 15px;
        }
        
      }
      .bottom{
        display: flex;
        .default{
          border: 2px solid #de212a;
          margin-right: 40px;
          border-radius: 6px;
          color: #de212a;
        }
      }
    }
    .right {
      font-size: 18px;
      line-height: 45px;
      color: #999;
    }
  }
  // 优惠券
  .discount{
    box-sizing: border-box;
    display: flex;
    margin-left: 20px;
    // line-height: 20px;
    padding: 15px 15px 15px 0;
    justify-content: space-between;
    border-bottom: 2px solid #eee;
    .left{
      display: flex;
      .content{
        line-height: 25px;
      }
      
    }
    .right{
      height: 20px;
      line-height: 25px;
      .num{
        margin-right: 20px;
      }
    }
  }
  // skuInfo
  .skuInfo{
    padding: 20px;
    
    .content{
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .left{
        width: 90px;
        border-radius: 10%;
        overflow: hidden;
        img{
          width: 100%;
        }
      }
      .right{
        width: 60px;
        text-align: center;
      }
      .center{
        flex: 1;
          line-height: 16px;
          padding: 0 7px;
        p{
          i{
            color: orange;
            margin-right: 5px;
          }
          
        }
        .spu{
            color: #999;
          }
        .price{
          .now{

          }
          .old{
            color: #999;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  // agree
  .agree{
    padding:15px 20px;
    display: flex;
    background-color: #eee;
    .already{
      line-height: 25px;
      i{
        color: #999;
      }
    }
  }
  // 提交订单
  .submit{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 16px;
    background-color: #fff;
    display: flex;
    height: 48px;
    text-align: center;
    line-height: 48px;
    justify-content: space-between;
    .left{
      color: #de212a;
      padding-left: 20px;
    }
    .right{
      width: 100px;
      color: #fff;
      background-color: #de212a;
    }
  }
    .empty{
    height: 48px;
  }


}

</style>